<template>
    <div id="myChart" style="width: auto; height: 800px;"></div>
</template>

<script>
    export default {
        name: 'hello',
        data() {
            return {
                dataForm: {
                    id: ''
                },
            }
        },
        methods: {
            init() {
				this.drawLine(this.dataForm.id)
            },
            async drawLine(topUserId) {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                myChart.showLoading();
				let res = await this.$get('/demo/xlscirclepri/getRootOneSecondThree/'+topUserId, { });
                // $.get('/api/flare/', function (data) {
                    myChart.hideLoading();

                    myChart.setOption({
                        tooltip: {
                            trigger: 'item',
                            triggerOn: 'mousemove'
                        },
                        series: [
                            {
                                type: 'tree',
                                data: [res.data],
                                top: '1%',
                                left: '9%',
                                bottom: '1%',
                                right: '20%',
                                symbolSize: 7,
                                label: {
                                    position: 'left',
                                    verticalAlign: 'middle',
                                    align: 'right',
                                    fontSize: 9
                                },
                                leaves: {
                                    label: {
                                        position: 'right',
                                        verticalAlign: 'middle',
                                        align: 'left'
                                    }
                                },
                                expandAndCollapse: true,
                                animationDuration: 550,
                                animationDurationUpdate: 750
                            }
                        ]
                    });
					myChart.on("click", function(param){
						console.log(param)
						 if (typeof param.seriesIndex == 'undefined') {
						                return;
						        }
						    if (param.type == 'click') {
						         if (!param.data.children.length > 0) {
						             //param.data.collapsed=true;
						             console.log(param.data.collapsed);
						             if(param.data.collapsed == undefined || param.data.collapsed == true){
						                 console.log("未定义或者是未展开，下次即将展开");
						                 param.data.collapsed=false;
										 getOne(param,myChart)
						             }else{
						                console.log("下次不展开");
						                 param.data.collapsed=true;
						                 return;
						             }
						         }
						    }
					})
            },
			async getOneTwoThree(param,myChart) {
				let res1 = await this.$get('/demo/xlscirclepri/getXlsUserSecondThree/'+param.data.xlsUserId, { });
				for (var i = 0; i < res1.data.length; i++) {
					param.data.children.push(res1.data[i]);//这里可以修改你动态获取到的数据在此赋值到data里面
				}
				
				param.data.hasChild =false; 
				param.data.collapsed=false;
				
				console.log(param.data);
				console.log(myChart.getOption().series[0].data);
				let data1 = myChart.getOption().series[0].data;
				myChart.clear();
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						triggerOn: 'mousemove'
					},
					series: [
						{
							type: 'tree',
							data: data1,
							top: '1%',
							left: '9%',
							bottom: '1%',
							right: '20%',
							symbolSize: 7,
							label: {
								normal: {
									position: 'left',
									verticalAlign: 'middle',
									align: 'right',
									fontSize: 9
								}
							},
							leaves: {
								label: {
									normal: {
										position: 'right',
										verticalAlign: 'middle',
										align: 'left'
									}
								}
							},
							expandAndCollapse: true,
							animationDuration: 550,
							animationDurationUpdate: 750
						}
					]
				});
			}
        },
		mounted() {
		     window.getOne = this.getOneTwoThree;
		  },
    }
</script>

<style scoped>

</style>
